<template>
    <div class="warp">
        <van-nav-bar title="缓存" :fixed="true" >
            <i class="iconfont ireturn" slot="left" @click="back"></i>
            <!-- <span slot="right" @click="cleanHis" >清空</span> -->
        </van-nav-bar>
        <div class="v-body">
            <p class="v-notice">{{msg}}</p>
            <van-swipe-cell v-for="(item,key) in cacheData" >
              <van-row gutter="10"  class="v-item" type="flex">
                  <van-col span="8" >
                    <a :href="'#/detail/'+item.vid">
                        <div class="v-item-imghd">
                          <img v-lazy="item.vpic" />
                          <span class="v-item-imghd-hot">{{item.vnote}}</span>
                        </div>
                    </a>
                  </van-col>
                  <van-col span="16" class="v-item-cache-body">
                    <a :href="'#/detail/'+item.vid">
                        <h2>{{item.vname}}</h2>
                        <p>{{item.vpublishyear +'/'}}{{item.vpublisharea+'/'}}{{item.tnamel2}}</p>
                        <p>{{item.hdate}}</p>
                        <p>缓存个数:<span class="v-item-mark theme-color">{{item.playData.length}}</span></p>
                    </a>
                      <p class="v-item-cache-foot">
                          <van-button @click="choosePlay(item)" plain type="info" size="small">播放<i class="iconfont imovie"></i></van-button>
                      </p>
                  </van-col>
              </van-row>
              <template slot="right">
                <van-button square type="danger" text="删除" class="v-swipe-del"/>
              </template>
            </van-swipe-cell>
        </div>
        <BackTop />
        <van-popup
          v-model="popPlayShow"
          position="bottom"
          :style="{ height: '75%' }"
        >
        <div 
          class="v-play-pop">
          <h2>缓存列表</h2>
            <van-row>
            <van-col :span="p.num.length>2?'6':'4'" v-for="(p,i) in playData" class="v-play-item">
                <span @click="play(p,i)">{{p.num}}</span>
            </van-col>
            </van-row>
          </div>
        </van-popup>
    </div>
</template>
<script>
export default {
  name: "history",
  components: {
  },
  data() {
    return {
      popPlayShow:false,
      cacheData:[],
      playData:[],
      msg:'',
      vData:{},
    };
  },
  methods: {
    back() {
      this.$back();
    },
    choosePlay(item){
      this.vData = item;
        this.playData = item.playData;
        this.popPlayShow = true;
    },
    loadCacheData(){
      this.cacheData =  vshow.cache.getCacheData();
      if(Object.keys(this.cacheData).length > 0){
          this.msg = '';
      }else{
          this.msg = '无缓存记录';
      }
    },
    play(item,i){
        var playData = this.playData.slice(i);
        document.location = "js://playCache?playStr="+JSON.stringify(playData)+"&title="+this.vData.vname;
    }
  },
  mounted() {
    this.loadCacheData();
  }
};
</script>
<style lang="less" >
</style>
